<extend name="public@base5" />
<block name="main">
<div class="row" style="font-size: 14px;">
    <div class="col-9 row row-deck row-cards">
        <div class="col-4">
            <div class="card">
                <div class="card-body row">
                    <div class="col-3" style="margin-top: 8%; padding-right: 0;">
                        <div class="subheader">用户访问量</div>
                        <div class="h3">{$login_log_count}</div>
                        <div>
                            <small class="text-muted">环比上月</small>
                            <if condition="$login_log_is_rise">
                                <span class="text-success">↑{$login_log_change_rate}%</span>
                                <else />
                                <span class="text-dange">↓{$login_log_change_rate}%</span>
                            </if>
                        </div>
                    </div>
                    <div class="col-9">
                        <div id="login_log_count" style="height:160px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-body row">
                    <div class="col-3" style="margin-top: 8%; padding-right: 0;">
                        <div class="subheader">新增用户量</div>
                        <div class="h3">{$new_user_cur_mon_count}</div>
                        <div>
                            <small class="text-muted">环比上月</small>
                            <if condition="$new_user_is_rise">
                                <span class="text-success">↑{$new_user_change_rate}%</span>
                                <else />
                                <span class="text-dange">↓{$new_user_change_rate}%</span>
                            </if>
                        </div>
                    </div>
                    <div class="col-9">
                        <div id="new_user_count" style="height:160px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-body row">
                    <div class="col-3" style="margin-top: 8%; padding-right: 0;">
                        <div class="subheader">月活用户量</div>
                        <div class="h3">{$active_user_cur_mon_count}</div>
                        <div>
                            <small class="text-muted">环比上月</small>
                            <if condition="$active_user_is_rise">
                                <span class="text-success">↑{$active_user_change_rate}%</span>
                                <else />
                                <span class="text-dange">↓{$active_user_change_rate}%</span>
                            </if>
                        </div>
                    </div>
                    <div class="col-9">
                        <div id="active_user_count" style="height:160px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-2">
                            <div class="h3">{$total_user_count}</div>
                            <div class="subheader">累计用户数</div>
                        </div>
                        <div class="col-2">
                            <div class="h3">{$today_new_user_count}</div>
                            <div class="subheader">今日新增</div>
                        </div>
                        <div class="col-12">
                            <div id="login_7day_user_count" style="height:260px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="col-4" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body row">
                    <div class="col-12">
                        <div class="h3">{$audit_wait_rate}%</div>
                        <div class="subheader">待审核占比</div>
                    </div>
                    <div class="col-12">
                        <div id="audit_chart" style="height:260px;"></div>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="col-12" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body row">
                    <div class="col-12">
                        <div class="subheader">用户排行榜</div>
                    </div>
                    <div class="col-12">
                        <table id="user_rank_table" class="table table-hover table-bordered margin-top-20">
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>用户信息</th>
                                <th>手机号</th>
                                <th onclick="sortTable3(this, 'user_rank_table', 3, 'int')">访问天数
                                    <if condition="$sort_col eq 3">
                                        <if condition="$sort_type eq 'asc'">
                                            <span>▲</span>
                                            <else />
                                            <span>▼</span>
                                        </if>
                                    </if>
                                </th>
                                <th onclick="sortTable4(this, 'user_rank_table', 4, 'int')">订单数
                                    <if condition="$sort_col eq 4">
                                        <if condition="$sort_type eq 'asc'">
                                            <span>▲</span>
                                            <else />
                                            <span>▼</span>
                                        </if>
                                    </if>
                                </th>
                                <th onclick="sortTable5(this, 'user_rank_table', 5, 'int')">消费总额
                                    <if condition="$sort_col eq 5">
                                        <if condition="$sort_type eq 'asc'">
                                            <span>▲</span>
                                            <else />
                                            <span>▼</span>
                                        </if>
                                    </if>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <foreach name="user_rank_list" item="vo" key="index">
                                <tr>
                                    <td>{$index+1}</td>
                                    <td>
                                        <div style="display: flex; align-items: center;">
                                            <a href="javascript:parent.imagePreviewDialog('{:cmf_get_image_preview_url($vo.avatar)}');">
                                                <img width="50" height="50" src="{:cmf_get_image_url($vo.avatar)}">
                                            </a>
                                            <div style="margin-left: 10px;">
                                                <div>{$vo.user_nickname}</div>
                                                <div>ID：{$vo.id}</div>
                                            </div>
                                        </div>
                                    </td>   
                                    <td>{$vo.mobile}</td>
                                    <td>
                                        {$vo.login_day_count}
                                    </td>                                            
                                    <td>
                                        {$vo.order_count}
                                    </td>
                                    <td>
                                        {$vo.order_sum}
                                    </td>
                                </tr>
                            </foreach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="col-3 row row-deck row-cards">
        <div class="card">
            <div class="card-body row" style="flex: 0 0 auto;">
                <div class="col-12">
                    <div class="subheader">消费监控</div>
                </div>
                <div class="col-12">
                    <foreach name="consumer_monitoring_list" item="vo" key="index">
                        <div style="display: flex; align-items: center; margin-top: 20px;">
                            <a href="javascript:parent.imagePreviewDialog('{:cmf_get_image_preview_url($vo.item_icon)}');">
                                <img width="80" height="80" src="{:cmf_get_image_url($vo.item_icon)}">
                            </a>
                            <div style="margin-left: 10px; width: calc(100% - 80px);">
                                <div>
                                    <img width="20" height="20" src="{:cmf_get_image_url($vo.avatar)}" style="border-radius: 50%;">
                                    <span style="font-weight: bold;">{$vo.user_nickname}</span>
                                    <span class="text-muted" style="float: right;">{$vo.mobile}</span>
                                </div>
                                
                                <div style="margin-top: 10px;"><small>订单编号：<span style="color:coral;">{$vo.id}</span></small></div>
                                <div class="text-muted">付款：{$vo.cost}.00<span style="float: right;">{:date('Y-m-d H:i',$vo['create_time'])}</span></div>
                            </div>
                        </div>
                    </foreach>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="__TMPL__/public/assets/js/echarts.js"></script>

    <script type="text/javascript">
        // 用户访问量
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: '10%',
                left: '1%',
                right: '1%',
                bottom: '1%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: {$login_log_months},
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: {$login_log_counts}
                }
            ]
        };
        var loginLogCount = echarts.init(document.getElementById('login_log_count'));
        loginLogCount.setOption(option);

        // 新增用户量
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: '10%',
                left: '1%',
                right: '1%',
                bottom: '1%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: {$new_user_months},
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'line',
                    barWidth: '60%',
                    data: {$new_user_counts}
                }
            ]
        };
        var newUserCount = echarts.init(document.getElementById('new_user_count'));
        newUserCount.setOption(option);

        // 月活用户量
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: '10%',
                left: '1%',
                right: '1%',
                bottom: '1%',
                containLabel: true
            },
            yAxis: [
                {
                    type: 'category',
                    data: {$active_user_months},
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            xAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: {$active_user_counts}
                }
            ]
        };
        var activeUserCount = echarts.init(document.getElementById('active_user_count'));
        activeUserCount.setOption(option);

        // 7日用户登录量
        option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    {$login_7day_title_array},
                    {$login_7day_count_array},
                    {$login_7day_new_user_count_array}
                    // ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    // ['访问人数', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                    // ['新增人数', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7]
                ]
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            tooltip: {
                trigger: 'item'
            },
            grid: {
                top: '16%',
                left: '1%',
                right: '1%',
                bottom: '1%',
                containLabel: true
            },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                }
            ]
        };
        var login7DayUserCount = echarts.init(document.getElementById('login_7day_user_count'));
        login7DayUserCount.setOption(option);

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: { 
                left: 'center'
            },
            series: [
                {
                    name: '待审核占比',
                    type: 'pie',
                    radius: ['50%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: {$audit_pass_rate}, name: '已通过' },
                        { value: {$audit_wait_rate}, name: '待审核' },
                        { value: {$audit_reject_rate}, name: '已拒绝' }
                    ]
                }
            ]
        };
        var login7DayUserCount = echarts.init(document.getElementById('audit_chart'));
        login7DayUserCount.setOption(option);
    </script>

    <script type="text/javascript">
        function sortTable3(th, tableId, iCol, dataType) {
            if ("{$sort_col}" == "3") {
                if ("{$sort_type}" == "desc") {
                    location.href = "{:url('admin/statistic/index',array('sort_col'=>3, 'sort_type'=>'asc'))}";
                } else {
                    location.href = "{:url('admin/statistic/index',array('sort_col'=>3, 'sort_type'=>'desc'))}";
                }
            } else {
                location.href = "{:url('admin/statistic/index',array('sort_col'=>3, 'sort_type'=>'desc'))}";
            }
        }
        function sortTable4(th, tableId, iCol, dataType) {
            if ("{$sort_col}" == "4") {
                if ("{$sort_type}" == "desc") {
                    location.href = "{:url('admin/statistic/index',array('sort_col'=>4, 'sort_type'=>'asc'))}";
                } else {
                    location.href = "{:url('admin/statistic/index',array('sort_col'=>4, 'sort_type'=>'desc'))}";
                }
            } else {
                location.href = "{:url('admin/statistic/index',array('sort_col'=>4, 'sort_type'=>'desc'))}";
            }
        }
        function sortTable5(th, tableId, iCol, dataType) {
            if ("{$sort_col}" == "5") {
                if ("{$sort_type}" == "desc") {
                    location.href = "{:url('admin/statistic/index',array('sort_col'=>5, 'sort_type'=>'asc'))}";
                } else {
                    location.href = "{:url('admin/statistic/index',array('sort_col'=>5, 'sort_type'=>'desc'))}";
                }
            } else {
                location.href = "{:url('admin/statistic/index',array('sort_col'=>5, 'sort_type'=>'desc'))}";
            }
        }
        // 表格数据自定义排序，数据按int（float、string、date）进行升序或降序排列  
        // 排序 tableId: 表的id,iCol:第几列从0开始 ；dataType：iCol对应的列显示数据的数据类型，例如：日期就是date
        function sortTable(th, tableId, iCol, dataType) {
            var ascChar = "▲";
            var descChar = "▼";
            var table = document.getElementById(tableId);
            // 排序标题加背景色
            for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
                var th = $(table.tHead.rows[0].cells[t]);
                var thText = th.html().replace(ascChar, "").replace(descChar, "");
                if (t == iCol) {
                    // th.css("background-color", "#ccc");
                } 
                else {
                    // th.css("background-color", "#d2d8de");
                    th.html(thText);
                }
            }

            var tbody = table.tBodies[0];
            var colRows = tbody.rows;
            var aTrs = new Array;

            // 将得到的行放入数组，备用
            for (var i = 0; i < colRows.length; i++) {
                // 注：如果要求“分组明细不参与排序”，把下面的注释去掉即可
                // if ($(colRows[i]).attr("group") != undefined) {
                aTrs.push(colRows[i]);
                // }
            }

            // 判断上一次排列的列和现在需要排列的是否同一个。
            var thCol = $(table.tHead.rows[0].cells[iCol]);
            if (table.sortCol == iCol) {
                aTrs.reverse();
            } 
            else {
                // 如果不是同一列，使用数组的sort方法，传进排序函数
                aTrs.sort(compareEle(iCol, dataType));
            }

            var oFragment = document.createDocumentFragment();
            for (var i = 0; i < aTrs.length; i++) {
                oFragment.appendChild(aTrs[i]);
            }
            tbody.appendChild(oFragment);

            // 记录最后一次排序的列索引
            table.sortCol = iCol;

            // 给排序标题加“升序、降序” 小图标显示
            var th = $(table.tHead.rows[0].cells[iCol]);
            if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
                th.html(th.html() + ascChar);
            } 
            else if (th.html().indexOf(ascChar) != -1) {
                th.html(th.html().replace(ascChar, descChar));
            } 
            else if (th.html().indexOf(descChar) != -1) {
                th.html(th.html().replace(descChar, ascChar));
            }

            // 重新整理分组
            var subRows = $("#" + tableId + " tr[parent]");
            for (var t = subRows.length - 1; t >= 0; t--) {
                var parent = $("#" + tableId + " tr[group='" + $(subRows[t]).attr("parent") + "']");
                parent.after($(subRows[t]));
            }
        }

        // 将列的类型转化成相应的可以排列的数据类型
        function convert(sValue, dataType) {
            switch (dataType) {
                case "int":
                    return parseInt(sValue, 10);
                case "float":
                    return parseFloat(sValue);
                case "date":
                    return new Date(Date.parse(sValue));
                case "string":
                default:
                    return sValue.toString();
            }
        }

        // 排序函数，iCol表示列索引，dataType表示该列的数据类型
        function compareEle(iCol, dataType) {
            return function(oTR1, oTR2) {
                var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);
                var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);
                if (vValue1 < vValue2) {
                    return -1;
                } 
                else {
                    return 1;
                }

            };
        }

        // 去掉html标签
        function removeHtmlTag(html) {
            return html.replace(/<[^>]+>/g, "");
        }
    </script>
</block>